<template>
    <div>
        <h1 ref="t1">张三</h1>
        <h1 ref="t2">李四</h1>
        <h1 ref="t3">王五</h1>
        <button @click="show">点我打印</button>
    </div>
</template>

<script setup lang="ts" name="Student">
    import {ref} from 'vue'

    let t1=ref();
    let t2=ref();
    let t3=ref();


    function show(){
        //通过id获取标签元素对象
        const tt1=document.getElementById('t1');

        //控制台打印
        // console.log(tt1?.innerText)
        // console.log(tt1?.innerHTML)
        // console.log((<HTMLElement>tt1).innerText)
        // console.log((tt1 as HTMLElement).innerText);
        // 以上都获取不了元素
        //但是可以通过t1.value获取模板中的标签元素
        console.log(t1.value)

    }

</script>

<style scoped>

</style>
